<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>商品结算页面-对象结构、数组方法使用</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 100px auto 0;
    }

    .item {
      padding: 15px;
      transition: all 0.5s;
      display: flex;
      border-top: 1px solid #e4e4e4;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }

    .item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }

    .item .name {
      font-size: 18px;
      margin-right: 10px;
      color: #333;
      flex: 2;
    }

    .item .name .tag {
      display: block;
      padding: 2px;
      font-size: 12px;
      color: #999;
    }

    .item .price,
    .item .sub-total {
      font-size: 18px;
      color: firebrick;
      flex: 1;
    }

    .item .price::before,
    .item .sub-total::before,
    .amount::before {
      content: "¥";
      font-size: 12px;
    }

    .item .spec {
      flex: 2;
      color: #888;
      font-size: 14px;
    }

    .item .count {
      flex: 1;
      color: #aaa;
    }

    .total {
      width: 990px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e4e4e4;
      padding: 20px;
    }

    .total .amount {
      font-size: 18px;
      color: firebrick;
      font-weight: bold;
      margin-right: 50px;
    }
  </style>
</head>

<body>
  <div class="list">
    <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="" />
      <p class="name">
        称心如意手摇咖啡磨豆机咖啡豆研磨机
        <span class="tag">【赠品】10优惠券</span>
        <span class="tag">【赠品】10优惠券</span>
      </p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
  </div>
  <div class="total">
    <div>合计：<span class="amount">1000.00</span></div>
  </div>
  <script>
    const goodsList = [
      {
        id: "4001172",
        name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
        price: 289.9,
        picture:
          "https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
        count: 2,
        spec: { color: "白色" },
      },
      {
        id: "4001009",
        name: "竹制干泡茶盘正方形沥水茶台品茶盘",
        price: 109.8,
        picture:
          "https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
        count: 3,
        spec: { size: "40cm*40cm", color: "黑色" },
      },
      {
        id: "4001874",
        name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
        price: 488,
        picture:
          "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
        count: 1,
        spec: { color: "青色", sum: "一大四小" },
      },
      {
        id: "4001649",
        name: "大师监制龙泉青瓷茶叶罐",
        price: 139,
        picture:
          "https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
        count: 1,
        spec: { size: "小号", color: "紫色" },
        gift: "50g茶叶,清洗球,宝马, 奔驰",
      },
    ];

    // 获取dom元素标签
    const list = document.querySelector('.list');
    const amount = document.querySelector('.amount');

    // 封装页面渲染函数
    let html = '';
    function randerHtml() {
      goodsList.forEach((item, index) => {
        // 解构数组获取赠品数据
        const { id, name, price, picture, count, spec, gift } = item;
        // 判断数组元素中是否存在gift元素，存在就将其中的数据通过split分割后使用map方法渲染成span标签，不存在就返回空
        let span = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : '';
        // 获取遍历的数据拼接到标签中
        html += `
        <div class="item">
        <img src="${item.picture}" alt="" />
        <p class="name">
          ${item.name}
          ${span}
        </p>
        <p class="spec">${Object.values(item.spec).join('/')}</p>
        <p class="price">${item.price}</p>
        <p class="count">x${item.count}</p>
        <p class="sub-total">${item.price * item.count}</p>
        </div>
      `;
      })
      // 将拼接好的结构添加到list盒子中
      list.innerHTML = html;
    }
    // 渲染页面
    randerHtml();

    // 使用raduce总价计算
    const money = goodsList.reduce((sum, item) => sum + item.price * item.count, 0);
    // 保留两位小数后添加到标签中
    amount.innerHTML = money.toFixed(2);

  </script>
</body>

</html>